<template>
<div>
  <div v-if="login">
      <i-button type="info" @click="modal = true">添加</i-button>
      <i-button type="success" @click="romoveMore">删除多个</i-button>
      <i-button type="warning" @click="checkAndUpdate" >选择修改</i-button>
      <i-button type="error" @click="selection">信息查询</i-button>
       <i-button type="error" @click="outlogin">退出登录</i-button>
        
      <Modal
          v-model="modal"
          title="用户信息"
          @on-ok="ok"
          @on-cancel="cancel">      
          <i-form ref='formvalidate' :model="formValidate" :rules="ruleValidate" :label-width="80">
              <Form-item label="姓名" prop="name">
                  <i-input v-model="formValidate.name" placeholder="请输入姓名"></i-input>
              </Form-item>
              <Form-item label="邮箱" prop="mail">
                  <i-input v-model="formValidate.mail" placeholder="请输入邮箱"></i-input>
              </Form-item>
              
              <Form-item>
                  <i-button type="primary" @click="handleSubmit('formvalidate')">提交</i-button>
                  <i-button type="ghost" @click="handleReset('formvalidate')" style="margin-left: 8px">重置</i-button>
              </Form-item>
          </i-form>
      </Modal>
      <Modal
          v-model="creatcomment"
          title="插入用户评论信息"
          @on-ok="ok"
          @on-cancel="cancel">    
           
          <i-form ref='commentformvalidate' :model="commentformValidate" :rules="commentruleValidate" :label-width="80">
              <Form-item label="标题" prop="title">
                  <i-input v-model="commentformValidate.title" placeholder="请输入标题"></i-input>
              </Form-item>
              <Form-item label="内容" prop="content">
                  <i-input v-model="commentformValidate.content" placeholder="请输入内容"></i-input>
              </Form-item>
              <Form-item label="id"  prop="useid">
                  <i-input v-model="commentformValidate.useid"></i-input>
              </Form-item>
              
              <Form-item>
                  <i-button type="primary" @click="commenthandleSubmit('commentformvalidate')">提交</i-button>
                  <i-button type="ghost" @click="handleReset('formvalidate')" style="margin-left: 8px">重置</i-button>
              </Form-item>
          </i-form>
      </Modal>
      <Modal
        v-model="comments"
        title="Common Modal dialog box title"
        @on-ok="ok"
        @on-cancel="cancel">
        <i-button type="error" @click="creatcomments('params')">增加评论</i-button>
        <Table border :columns="usecomment" :data="commentmassage" ></Table>
     </Modal>
      <Modal
          v-model="modal2"
          title="搜索用户信息"
          @on-ok="ok"
          @on-cancel="cancel">      
          <i-form ref='selectmassage' :model="selectmassage" :rules="ruleValidate" :label-width="80">
              <Form-item label="姓名" prop="name">
                  <i-input v-model="selectmassage.name" placeholder="请输入姓名"></i-input>
              </Form-item>         
              <Form-item>
                  <i-button type="primary" @click="Submit">提交</i-button>
                  <i-button type="ghost" @click="handleReset('selectmassage')" style="margin-left: 8px">重置</i-button>
              </Form-item>
          </i-form>
      </Modal>
    
          <Modal
              v-model="modal1"
              title="普通的Modal对话框标题"
              @on-ok="upDate"
              @on-cancel="cancel">
              <div v-for="uses in data.outmassage" :key="uses">
                  <p v-for=" use in uses" :key="use">
                    姓名： <input v-model="use.name"/>
                    邮箱： <input v-model="use.mail"/><br>
                    城市： <input v-model="use.city"/> 
                    密码： <input v-model="use.password"/>
                    <hr>                   
                  </p>
              
              </div>          
          </Modal>
      <Table border :columns="columns" :data="list" @on-select="checkMore"></Table>
      <Page :total="30" show-sizer size="small" show-elevator @on-change="onChangePage" @on-page-size-change="changeSize"></Page>
  </div>
  <div v-else>
       请登录
  </div>
</div>
  
</template>
<script>
import {mapGetters,mapActions} from 'vuex';
export default {
  data() {
    return {
      selectmassage: {
        name: ""
      },
      formValidate: {
        name: "",
        mail: "222@qq.com"
      },
      commentformValidate:{
           title:'',
           content:'',
           useid:''
      },
      ruleValidate: {
        name: [{ required: true, message: "不能为空", trigger: "blur" }],
        mail: [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          { type: "email", message: "邮箱格式不正确", trigger: "blur" }
        ]
      },
       commentruleValidate: {
              name: [
                        { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                    ],

       },
       comments:false,
       creatcomment:false,
      modal1: false,
      modal2: false,
      modal: false,
      usecomment:[
        
        {
          title: "用户名",
          key: "name",
          render: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "person"
                }
              }),
              h("strong", params.row.name)
            ]);
          }
        },
        {
          title: "内容",
          key: "content"
        },
        {
          title: "标题",
          key: "title"
        },
        {
          title: "Action",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [             
               h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {

                       this.creatcomments(params);
                    }
                  }
                },
                "增加评论"
              ),                         
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.comments=true
                      this.removecomment(params);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
          
        },
        {
          title: "姓名",
          key: "name",
          render: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "person"
                }
              }),
              h("strong", params.row.name)
            ]);
          }
        },
        {
          title: "邮箱",
          key: "mail"
        },
        {
          title: "城市",
          key: "city"
        },
        {
          title: "评论数",
          key: "number"
        },
        {
          title: "Action",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.comments=true;
                      this.showcomment(params);
                    }
                  }
                },
                "查看评论"
              ),
              
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "查看信息"
              ),
              
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      commentmassage:[],
      list: [],
      data: {
        outmassage: [],
        select: [],
        pages: 0,
        page: 1,
        total: 1,
        limit: 10
      }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    ...mapActions(['checkLogin']),
    getData(type) {
      var type = type || 0;
      this.$http({
        method: "post",
        url: "http://localhost:3000/users/list",
        data: {
          limit: this.data.limit,
          page: this.data.page
        }
      }).then(response => {
        this.data.total = response.data.total;
        this.list = response.data.docs;
        console.log(this.list);
      
      });

    },
    selection() {
      this.modal2 = true;
    },
    Submit() {
      this.$http({
        method: "post",
        url: "http://localhost:3000/users/list",
        data: this.selectmassage
      }).then(response => {
        this.data.total = response.data.total;
        this.list = response.data.docs;
      });
      this.modal2 = false;
    },
    upDate() {
      for (let i = 0; i < this.data.outmassage.length; i++) {
        this.$http({
          method: "put",
          url:
            "http://localhost:3000/users/data/" +
            this.data.outmassage[i][0]._id,
          data: this.data.outmassage[i][0]
        });
      }
      this.data.outmassage = [];
      this.data.select = [];
      this.getData();
    },
    changeSize(size) {
      this.data.limit = size;
      this.getData();
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          // ajax数据请求

          this.$http({
            method: "post",
            url: "http://localhost:3000/users/data",
            data: this.formValidate
          }).then(res => {
            this.getData();
            this.$Message.success("Success!");

            // 重置form表单内容为数据的初始值状态
            // ********** 非常重要
            Object.assign(
              this.$data.formValidate,
              this.$options.data().formValidate
            );
          });
          this.modal = false;

          this.$Message.success("提交成功!");
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    },
    romoveMore() {
      if (this.data.select.length > 0) {
        this.$Modal.confirm({
          title: "删除确认",
          content: "<p>确认删除吗？</p>",
          onOk: () => {
            this.data.select.forEach(element => {
              this.$http({
                method: "delete",
                url: "http://localhost:3000/users/data/" + element
              });
            });

            this.$Message.info("删除成功");
            this.data.select = [];
            this.getData();
          },
          onCancel: () => {
            this.$Message.info("点击了取消");
          }
        });
      } else {
        alert("请选择");
      }
    },
    checkAndUpdate() {
      if (this.data.select.length > 0) {
        for (let i = 0; i < this.data.select.length; i++) {
          this.$http({
            method: "post",
            url: "http://localhost:3000/users/list",
            data: {
              _id: this.data.select[i]
            }
          }).then(response => {
            this.data.outmassage.push(response.data.docs);
            this.modal1 = true;
          });
        }

        //    this.data.select.forEach(element => {
        //       this.$http({
        //         method: "post",
        //         url: "http://localhost:3000/users/list",
        //         data:{
        //            _id:element
        //         }
        //       }).then(response => {
        //             console.log(response.data.docs);
        //            this.data.outmassage.push(response.data.docs)
        //             this.modal1 = true
        //          });
        //    });
        //  console.log(this.data.outmassage)
      } else {
        alert("请选择");
      }
    },
    checkMore(selection, row) {
      selection.forEach((element, index) => {
        this.data.select[index] = element._id;
      });
    },

    handleReset(name) {
      this.$refs[name].resetFields();
    },

    ok() {
      this.$Message.info("点击了确定");
    },
    cancel() {
      this.$Message.info("点击了取消");
      this.data.select = [];
      this.data.outmassage = [];
      this.getData();
    },
    show(index) {
      this.$Modal.info({
        title: "用户信息查看",
        content: `姓名：${this.list[index].name}<br>邮箱：${this.list[index]
          .mail}<br>城市：${this.list[index].city}<br>评论：${this.list[index].comments}`
      });
    },
    showcomment(params){//点击查看评论，弹出该用户评论的信息
         console.log(params.row._id);
         this.commentformValidate.useid=params.row._id;
         this.$http({
            method: "post",
            url: "http://localhost:3000/usercomment/list",
            data: {
              useid:params.row._id,
              limit: 1000,
              page: 1
            }
            }).then(response => {             
              this.commentmassage = response.data.docs; 
               this.commentmassage.forEach((ele)=>{
                  ele.name=this.list.filter((element, index, array)=>{return (element._id==params.row._id);})[0].name
               })
                console.log(this.commentmassage);                       
        });
    },
    creatcomments(){//点击用户信息界面里面的增加按钮，增加用户的评论信息
          this.creatcomment=true;
          this.comments=false;
         this.commentformValidate.useid=this.commentmassage[0].useid


    },
    commenthandleSubmit(name){//点击增加用户评论的提交按钮，提交增加的信息
         console.log(this.commentformValidate)
        this.$refs[name].validate(valid => {
        if (valid) {
          // ajax数据请求

          this.$http({
            method: "post",
            url: "http://localhost:3000/usercomment/data",
            data: this.commentformValidate
          }).then(res => {
            this.comments=true;
            this.$Message.success("Success!");

            // 重置form表单内容为数据的初始值状态
            // ********** 非常重要
            Object.assign(
              this.$data.commentformValidate,
              this.$options.data().commentformValidate
            );
          });
          this.creatcomment = false;

          this.$Message.success("提交成功!");
          this.getData();
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    },
    removecomment(params){//点击用户评论弹窗的删除按钮，删除对应的评论数据
         console.log(params.row._id)
         this.$Modal.confirm({
        title: "确认对话框标题",
        content: "<p>确认删除吗？</p>",
        onOk: () => {
          this.$http({
            method: "delete",
            url: `http://localhost:3000/usercomment/data/${params.row._id}`
          }).then(response => {
            this.$Message.info("删除成功");
            this.comments=false;
           
          });
        },
        onCancel: () => {
          this.$Message.info("点击了取消");
        }
      });
    },
    remove(index) {
      this.$Modal.confirm({
        title: "确认对话框标题",
        content: "<p>确认删除吗？</p>",
        onOk: () => {
          this.$http({
            method: "delete",
            url: `http://localhost:3000/users/data/${index.row._id}`
          }).then(response => {
            this.$Message.info("删除成功");
            this.getData();
          });
        },
        onCancel: () => {
          this.$Message.info("点击了取消");
        }
      });
    },
    onChangePage(page) {
      this.data.page = page;
      this.getData();
    },
    outlogin(){
       this.checkLogin(false)
    }
  },
  computed:{
      ...mapGetters(['login'])
  }
};
</script>
